<template>
  <div>demo/MyComp/index
    <Child1 ref="dee" :msg="psmg" :nums="1"></Child1>
    <button @click="callChildFunction">按钮</button>
    <hr>
    <input v-model="mm">{{'mm:' + mm}}<br>
    <input v-bind:value="mm" @input="mm=$event.target.value">{{'mm:' + mm}}
    <hr>
<!--    <Child2 :val="pval" @input="cv"></Child2>{{'pavl:' + pval}}<br>-->
    <Child2 v-model="pval"></Child2>{{'pavl:' + pval}}
    <hr>
    <Child3 v-model="taval" :pval="radioList" :defVal="taval"></Child3>{{'taval:'+taval}}
    <hr>
    <Child4 v-model="checkVal" :pval="radioList" :defVal="checkVal"></Child4>{{'checkVal:'+checkVal}}
    <hr>
    <Child5 v-model="numberToString" ></Child5>{{'中文转换:'+numberToString }}
    <hr>
    <Child6 v-model="range"></Child6>{{'range:'+range}}
  </div>
</template>

<script>
import Child1 from "./Child.vue"
import Child2 from "./Child2.vue"
import Child3 from "./Child3.vue"
import Child4 from "./Child4.vue"
import Child5 from "./Child5.vue"
import Child6 from "./Child6.vue"

export default {
  name: "index",
  components: {
    Child1,
    Child2,
    Child3,
    Child4,
    Child5,
    Child6,

  },
  data(){
    return{
      psmg:"父组件信息",
      mm:"model测试",
      pval:"父信息",
      nbval:"",
      taval:0,
      checkVal:[0,1],
      range:[0,0],
      numberToString:"",
      radioList:[
        {
          label:"电影",
          value:"0"
        },
        {
          label:"运动",
          value:"1"
        },
        {
          label:"打篮球",
          value:"2"
        }
      ]
    }
  },
  methods:{
    callChildFunction(){
      this.$refs.dee.changValue()
    },
    // cv(val){
    //   console.log("父函数被调用")
    //   this.pval = val
    // }
  }

}
</script>

<style scoped lang="scss">

</style>
